<template>
	<view class="container">

		<view class="top-card">

			<view class="flex align-center justify-between">
				<view class="f14px">累计总收益(元)</view>
				<view class="f12px" @click="$navTo('pages/assets/balance')">进账明细<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view style="font-size: 64rpx;" class="pt10">{{info.total_got}}</view>


			<view class="flex" style="margin-top: 35rpx;">
				<view style="flex: 1;" class="flex flex-column justify-center">
					<view class="f12px pb4">今日收益</view>
					<view class="f16px">{{info.today_got}}</view>
				</view>
				<view style="flex: 1;" class="flex flex-column justify-center">
					<view class="f12px pb4">待入账</view>
					<view class="f16px">{{info.wait_got}}</view>
				</view>
				<view style="flex: 1;" class="flex flex-column justify-center">
					<view class="f12px pb4">本月已入账</view>
					<view class="f16px">{{info.month_got}}</view>
				</view>
			</view>
		</view>

		<view class="item" :key="i" v-for="(x,i) in info.list">
			<u-cell-item bg-color="#fff" center :border-bottom="false" iconSize="64rpx"
				:iconStyle="{marginRight:'20rpx'}" :icon="x.thumb" :title="x.title" :title-style="{fontSize:'32rpx'}"
				@click="goCategory(x)">
				<text class="f12px f-2">￥</text>
				<text class="f18px f-2">{{x.prize.toFixed(2)}}</text>
			</u-cell-item>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/assets/income/index.js'
	export default {
		data() {
			return {
				info: {
					list: []
				}
			};
		},

		methods: {
			goCategory(item) {
				const app = this;
				uni.navigateTo({
					url: `/pages/assets/income/category?type=${item.type}`,
					success(res) {
						res.eventChannel.emit('tabs', {
							data: app.info
						})
					}
				})
			},
			async getIndex() {
				const app = this
				const res = await Api.index();
				if (res.data) {
					app.info = res.data;
				}
			}
		},

		onShow() {
			// 获取页面数据
			this.getIndex()
		},
	}
</script>

<style lang="scss" scoped>
	.top-card {
		margin: 24rpx auto;
		width: 718rpx;
		height: 344rpx;
		background: linear-gradient(270deg, #55E964 0%, #00AF4E 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid rgba(0, 0, 0, 0);
		padding: 50rpx 40rpx 40rpx;
		color: #fff;

	}

	.item {
		width: 718rpx;
		margin: 0 auto 16rpx;
		border-radius: 16rpx;
		overflow: hidden;

		.u-cell {
			height: 120rpx;
			font-size: 32rpx;
			color: #222222;
		}
	}
</style>